<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  </head>
  <style>
    #province {
      width: 145px;
      float: left;
    }

    #city {
      width: 145px;
      float: left;
    }

    #area {
      width: 145px;
    }

    th,
    td {
      text-align: center;
    }
  </style>

  <body>
    <h1 style="margin-left: 40%;">学生成绩考试目录</h1>
    <div style="margin-left: 562px">
      <select class="form-control" id="province">
        <option>请选择学校</option>
      </select>
      <select class="form-control" id="city">
        <option>请选择班级</option>
      </select>
      <select class="form-control" id="area">
        <option>请选择几班</option></select
      ><br />
      姓名:<input type="text" style="width: 100px" id="goodsname" /><br />
      语文:<input type="number" style="width: 100px" id="goodsnum" /><br />
      数学:<input type="number" style="width: 100px" id="goodsnam" /><br />
      英语:<input
        type="number"
        style="width: 100px"
        id="goodsnull"
      /><br /><br />
      <button style="width: 90px" id="addTr">添加</button>
    </div>
    <button id="btn">北京市朝阳小学</button
    ><button id="btn1">北京西城小学</button>
    <hr />
    <div style="margin-left: 40%">
      <button id="geobj">语文</button> <button id="itemscope">数学</button>
      <button id="yve">英语</button> <button id="form-control">总分</button>
    </div>
    <div style="width: 800px; margin-left: 20%">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>年纪-班级</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
            <th>平均分</th>
            <th>名次</th>
          </tr>
        </thead>
        <tbody class="ed">
          <tr>
            <td id="tboindex">一年级-01班</td>
            <td id="tboindex1">张三</td>
            <td id="tboindex2">20</td>
            <td id="tboindex3">60</td>
            <td id="tboindex4">60</td>
            <td id="tboindex5">20</td>
            <td id="tboindex6">60</td>
            <td id="tboindex7">60</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script>
    var citys = [
      {
        name: "北京市朝阳小学",
        city: [
          {
            name: "一年级",
            area: ["01班", "02班", "03班", "04班", "05班", "06班"],
          },
          {
            name: "二年级",
            area: ["01班", "02班", "03班", "04班", "05班", "06班"],
          }],
      },
      {
        name: "北京市西城小学",
        city: [
          {
            name: "一年级",
            area: ["01班", "02班", "03班", "04班", "05班", "06班"],
          },
          {
            name: "二年级",
            area: ["01班", "02班", "03班", "04班", "05班", "06班"],
          }],
      }]

    var arr = [],
      arr1 = [];
     let index
    $(function () {
      showArr()
      showArrList()
    })

    //第一个下拉框
    var str = "<option>请选择年</option>";
    for (let i in citys) {
      str += `
                <option value="${i}">${citys[i].name}</option>
                `;
    }
    $("#province").html(str);

    //第二个下拉框
    $("#province").change(function () {
       index = $(this).val();
      
      let cityArr = citys[index].city;
      let optionHtml = `<option>请选择</option>`;
      for (let i in cityArr) {
        optionHtml += `
                    <option value="${index}-${i}">${cityArr[i].name}</option>
                    `
      }
      $("#city").html(optionHtml);
    });
    //第三个下拉框
    $("#city").change(function () {
      var arr = $(this).val().split("-");
      var area = citys[arr[0]].city[arr[1]].area;

      var html = "<option>请选择几班</option>";
      for (i in area) {
        html += `<option value="${i}">${area[i]}</option>`;
      }
      $("#area").html(html);
    });

    $("#province").change(function () {
      if ($('#province option:selected').val() == 0) {
        $("#btn").css({ background: "aqua" });
        $("#btn1").css({ background: "#fff" });
        showArr()
      }else{
        $("#btn").css({ background: "#fff" });
        $("#btn1").css({ background: "aqua" });
        showArrList()
      }
    })

    function showArr() {
      arr = localStorage.getItem("arr")
        ? JSON.parse(localStorage.getItem("arr"))
        : [];
      st = ""
      for (let i in arr) {
        st += `
                <tr>
                    <td id="tboindex">北京市朝阳小学</td>
                    <td id="tboindex1">${arr[i].goodsname}</td>
                    <td id="tboindex2">${arr[i].goodsnum}</td>
                    <td id="tboindex3">${arr[i].goodsnam}</td>
                    <td id="tboindex4">${arr[i].goodsnull}</td>
                    <td id="tboindex5">${arr[i].goodszong}</td>
                    <td id="tboindex6">${arr[i].goodspingjunfen}</td>
                    <td id="tboindex7">60</td>
                </tr>
                `
      }
      $(".ed").html(st);
    }

    function showArrList() {
      arr1 = localStorage.getItem("arr1")
        ? JSON.parse(localStorage.getItem("arr1"))
        : [];
      stk = "";
      for (let i in arr1) {
        stk += `
                    <tr>
                        <td id="tboindex">北京市西城小学</td>
                        <td id="tboindex1">${arr1[i].goodsname}</td>
                        <td id="tboindex2">${arr1[i].goodsnum}</td>
                        <td id="tboindex3">${arr1[i].goodsnam}</td>
                        <td id="tboindex4">${arr1[i].goodsnull}</td>
                        <td id="tboindex5">${arr1[i].goodszong}</td>
                        <td id="tboindex6">${arr1[i].goodspingjunfen}</td>
                        <td id="tboindex7">60</td>
                    </tr>
                   `;
      }
      $(".ed").html(stk);
    }

    $("#addTr").click(function () {
      if($('#province option:selected').val() == 0){
        var goodsname = $("#goodsname").val(),
        goodsnum = $("#goodsnum").val(),
        goodsnam = $("#goodsnam").val(),
        goodsnull = $("#goodsnull").val(),
        goodszong = Number(goodsnum) + Number(goodsnam) + Number(goodsnull),
        goodspingjunfen =
          (Number(goodsnum) + Number(goodsnam) + Number(goodsnull)) / 3;
      var obj = {
        goodsname: goodsname,
        goodsnum: goodsnum,
        goodsnam: goodsnam,
        goodsnull: goodsnull,
        goodszong: goodszong,
        goodspingjunfen: goodspingjunfen,
      };

      arr.push(obj);
      localStorage.setItem("arr", JSON.stringify(arr));
      showArr();
    }else if($('#province option:selected').val() == 1){
      var goodsname = $("#goodsname").val(),
        goodsnum = $("#goodsnum").val(),
        goodsnam = $("#goodsnam").val(),
        goodsnull = $("#goodsnull").val(),
        goodszong = Number(goodsnum) + Number(goodsnam) + Number(goodsnull),
        goodspingjunfen =
          (Number(goodsnum) + Number(goodsnam) + Number(goodsnull)) / 3;
      var obj = {
        goodsname: goodsname,
        goodsnum: goodsnum,
        goodsnam: goodsnam,
        goodsnull: goodsnull,
        goodszong: goodszong,
        goodspingjunfen: goodspingjunfen,
      };

      arr1.push(obj);
      localStorage.setItem("arr1", JSON.stringify(arr1));
      showArrList()
    }
    });
      
    
  
    
  
    // $("#btn").click(function () {
   
    //   $("#btn1").css({ background: "azure" });

    //   localStorage.setItem("arr", JSON.stringify(arr));
    //   showArr();
    // });

    // $("#btn1").click(function () {
    //   $("#btn1").css({ background: "aqua" });
    //   $("#btn").css({ background: "azure" });
    //   localStorage.setItem("arr1", JSON.stringify(arr1));
    //   showArrList();
    // });
  </script>
</html>
